<template>
    <div class="doctorEvaluate">
        <page-title>医生评价</page-title>
        <div class="content-box">
          <!-- <div class="filter-box">
              <el-row>
                  <span class="item-name">医生姓名:</span>
                  <el-input placeholder="输入医生姓名" v-model="params.search.name"></el-input>
                  <el-button type="primary" style="margin-left: 10px;" @click="fetchData">查询结果</el-button>
              </el-row>
          </div> -->
          <el-table
              :data="dataList"
              border
              style="width: 100%">
              <el-table-column
                prop="doctors.name"
                align="center"
                label="医生姓名">
              </el-table-column>
              <el-table-column
                prop="users.user_name"
                align="center"
                width="170"
                label="用户昵称">
              </el-table-column>
              <el-table-column
                align="center"
                label="评价">
                <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.star-0"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                </template>
              </el-table-column>
              <el-table-column
                prop="create_time"
                width="170"
                align="center"
                label="评论时间">
              </el-table-column>
              <el-table-column 
                label="操作" 
                width="100"
                align="center"
                show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button 
                          type="text" 
                          size="small"
                          @click="lookDetail(scope.row)">查看</el-button>
                        <el-button 
                          type="text" 
                          size="small"
                          @click="deleteEvaluate(scope.row.id)">删除</el-button>
                    </template>
              </el-table-column>
          </el-table>
          <div class="footer-box">
              <div class="pagination-box">
                  <el-pagination
                      layout="prev, pager, next"
                      :page-size="params.limit"
                      @current-change="handleCurrentChange"
                      :total="total">
                  </el-pagination>
              </div>
          </div>
            
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
import { Message } from 'element-ui'
export default {
    name: 'doctorEvaluate',
    data () {
        return {
            dataList: [],  //列表数据
            //请求数据参数
            params: {
              "model": "DoctorComments",
              "limit": 10,
              "offset": 0,
              "orderBy":"create_time desc",
              "with":{
                  "0":"users",
                  "1":"doctors"
              },
              "condition":{

              },
              "search":{
                
              }
            },
            //总数据条数
            total: 0,
        }
    },
    created() { 
        var that = this;
        that.fetchData();
    },
    methods: {
        //请求数据
        fetchData(){
          var that = this;
          api.getDateList(that.params).then( res => {
            if (res.data.code == 200) {
              that.total = res.data.data.count - 0;
              that.dataList = res.data.data.data;
            }
          })
        },
        //点击页码
        handleCurrentChange(val) {
            var that = this;
            that.params.offset =  (val - 1);
            that.fetchData();
        },
        //查看医生评价详情
        lookDetail(item){
            var that = this;
            //存缓存
            var data = JSON.stringify(item);
            window.sessionStorage.setItem('evaluate-item', data);
            that.$router.push({name: 'doctorEvaluateDetail'});
        },
        //删除评价
        deleteEvaluate(id){
            var that = this;
            api.createData({
              "model": "DoctorComments",
              "data":{
                "is_delete":1
              },
              "update_condition": {
                "id":id
              }
            }).then(res => {
              if (res.data.code == 200) {
                Message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1000
                });
                that.fetchData();
              }
            })
        }
    },
    components: {}
}
</script>
<style>
    .filter-box input.el-input__inner, .filter-box .el-input{
        width: 170px;
    }
    .multiple-box input.el-input__inner, .multiple-box .el-input {
        width: 120px;
        margin-left: 10px;
    }
    .doctorEvaluate .el-tabs__header {
        margin: 0;
    }
</style>
<style scoped lang="scss">
    .doctorEvaluate {
        background: #ffffff;
        height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        .content-box {
            padding: 20px;
            padding-bottom: 70px;
            .filter-box {
                padding: 30px 0;
                border: 1px solid #e4e7ed;
                border-bottom: none;
                .item-name {
                    padding-left: 30px;
                    padding-right: 10px;
                }
            }
            .operate{
                width:100%;
                height: 100%;
                text-align: center;
                span {
                    color: #1ABC9C;
                    margin: 0 5px;
                }
            }
            .footer-box {
                height: 50px;
                padding-top: 20px;
                .multiple-box {
                    height: 50px;
                    line-height: 50px;
                    padding-left: 19px;
                }
                .pagination-box {
                    height: 50px;
                    line-height: 50px;
                    background: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    padding-top: 25px;
                }
            }
            .banner-setting {
                position: relative;
                width: 100%;
                height: 800px;
                background: #ffffff;
                border: 1px solid #e4e7ed;
                border-top: none;
                padding: 20px;
                .upload-item {
                    padding-top:45px;
                    padding-bottom:100px;
                    .upload-text {
                        font-size: 12px;
                        color: #999999;
                        margin-left: 30px;
                    }
                }
                .btn-box {
                    text-align: center;
                }
            }
        }
    }
</style>
